<template>
	<view class="container">
		<view class="gaps"></view>
		<uni-list>
			<uni-list-item showArrow>
				<template v-slot:header>
					<view class="shop-left">
						头像
					</view>
				</template>
				<template v-slot:footer>
					<button open-type="chooseAvatar" @chooseavatar="chooseAvatar" class="avatar-wrapper">
						<image class="avatar" :src="avatarUrl || '/static/logo.png'" mode="scaleToFill">
						</image>
					</button>
				</template>
			</uni-list-item>
			<uni-list-item  showArrow>
				<template v-slot:header>
					<view class="shop-left">
						昵称
					</view>
				</template>
				<template v-slot:footer>
					<input type="nickname" v-model="nickname" placeholder="请输入昵称" @blur="blueNickname"
						class="nick-name-input" :auto-blur="true">
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<view class="shop-left">
						手机号
					</view>
				</template>
				<template v-slot:footer>
					<input type="number" v-model="phone" placeholder="未设置" class="nick-name-input" :auto-blur="true">
				</template>
			</uni-list-item>
			<uni-list-item showArrow to="/subpkg/consumer/receiveAddressManage/receiveAddressManage">
				<template v-slot:header>
					<view class="shop-left">
						收货地址
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<view class="tips">
			为了更好的为您服务,请授权获取手机号<button size="mini" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhone"
				class="phone-btn">获取手机号</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserPhone,
		updateAvatar,
		updateNickname,
		getMyInfo,
	} from '@/api/my/my'
	import uploadFile from '@/utils/uploadFile.js'
	export default {
		data() {
			return {
				avatarUrl: "",
				nickname: "",
				oldName:'',
				phone: ""
			};
		},
		async onLoad() {
			let myInfo = await getMyInfo()
			this.avatarUrl = myInfo.imageUrl
			this.nickname = myInfo.nickname
			this.oldName = myInfo.nickname
			this.phone = myInfo.phone
		},
		methods: {
			async chooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				uni.showLoading({
					title: '上传头像中',
					mask: true
				});
				const {
					fileUrl: aUrl
				} = await uploadFile(avatarUrl, 'avatar/')
				updateAvatar({
					"avatarUrl": aUrl
				}).then(res => {
					uni.setStorageSync("userinfo", res)
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						mask: false
					})
					this.avatarUrl = avatarUrl;
				}).finally(() => {
					uni.hideLoading()
				})
			},
			blueNickname(e) {
				let _this = this
				let nk = e.detail.value
				if(nk === this.oldName) {
					return
				}
				this.$nextTick(() => {
					updateNickname({
						"nickname": nk
					}).then(res => {
						uni.setStorageSync("userinfo", res)
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							mask: false
						})
						_this.nickname = nk;
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			async getPhone(e) {
				let phone = await getUserPhone({
					code: e.detail.code
				})
				this.phone = phone;
			},
		}
	}
</script>

<style lang="scss">
	.container {
		font-size: 16px;
	}

	.shop-left {
		display: flex;
		align-items: center;
		font-size: 16px;
		min-width: 80px;
	}

	.avatar-wrapper {
		height: 60px;
		width: 60px;
		padding: 0;
	}

	.avatar {
		display: block;
		height: 60px;
		width: 60px;
		border-radius: 8px;
	}

	.nick-name-input {
		text-align: right;
	}

	.tips {
		margin-top: 10px;
		font-size: 12px;
		color: #5f5f5f;
		display: flex;
		align-items: center;
	}
</style>